<template>
  <div class="times">
    <div class="header">
      <div class="title">
        <span>{{ title }}</span>
        <navigator :url="'/pages/shop/shop'"> <span>更多</span>> </navigator>
      </div>
      <div v-for="(item, index) in timesList" :key="index" class="h1">
        <div v-for="(item1, index1) in item.items64" :key="index1" class="h2">
          <div v-for="(item2, index2) in item1" :key="index2" class="h3">
            <img :src="item2.image" />
            <p>{{ item2.desc }}</p>
            <p>{{ item2.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTimesList } from "../services/index";
export default {
  data() {
    return {
      timesList: [],
      title: "",
    };
  },
  mounted() {
    this.getTimeslist();
  },
  methods: {
    //限时特惠
    async getTimeslist() {
      let result = await getTimesList();
      this.title = result.data[0].title;
      this.timesList = result.data[0].listData;
    },
  },
};
</script>

<style lang="scss" scoped>
.times {
  width: 100%;
}
.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    span:nth-of-type(1) {
      font-size: 30rpx;
      font-weight: 600;
    }
  }
  .h1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20rpx;
    .h2 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .h3 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        img {
          width: 350rpx;
          height: 200rpx;
        }
        p:nth-of-type(1) {
          font-size: 30rpx;
        }
        p:nth-of-type(2) {
          font-size: 26rpx;
          color: #ccc;
        }
      }
    }
  }
}
</style>